<template>
	<view class="container">

		<van-swipe-cell :right-width="0" @longpress="longpress">
			<beiwang :shuju='meituan' @editBtn="editBtn" @clickBtn="clickBtn" :active-box="acitveBox" @add="add">
			</beiwang>
			<van-popup :show="showLongpress" @close="closeLongpress()" class="showMoreBtn">
				<view class="right_item"  style="background-color: rgba(225,58,162,0.7);" @click="getOffer">拿到<br/>offer</view>
				<view class="right_item"  style="background-color: rgba(41,119,208,0.7);" @click="stopProcess">终止<br/>进程</view>
				<view class="right_item"  style="background-color: rgba(153,153,153,0.7);"  @click="deleteProcess">删除<br/>进程</view>
			</van-popup>
		</van-swipe-cell>


		<uni-fab :pattern="pattern" horizontal="right" vertical="bottom" :popMenu="false" @fabClick="showPopup()" />
		<van-popup :show="show" @close="onClose()" >
			<view class="dialog">
				<view class="title">新增备忘</view>
				<view class="cell_area">
					<van-cell-group>
						<van-field :value="company" required clearable label="公司" />
						<van-field :value="job" required clearable label="职位" />
						<van-field :value="place" required clearable label="地点" />
						<van-field :value="money" clearable label="薪资" />
					</van-cell-group>
				</view>

				<!-- 提交按钮 -->
				<view class="submit_btn">
					<button type="primary" size="mini" class="confirm_btn">确定</button>
				</view>
			</view>
		</van-popup>

		<van-popup :show="showDialog" @close="closeDialog()">
			<view class="dialog">
				<view class="title">{{title}}</view>
				<view class="cell_area">
					<van-cell-group>
						<van-field :value="form.date" required clearable label="日期" />
						<van-field :value="form.desc" required clearable label="描述" />
					</van-cell-group>
				</view>

				<!-- 提交按钮 -->
				<view class="submit_btn">
					<button type="primary" size="mini" class="confirm_btn">确定</button>
				</view>
			</view>
		</van-popup>

		<van-action-sheet :show="showOperator" :actions="operators" @select="selectOperator" cancel-text="取消"
			@close="closeOperator()" @cancel="closeOperator()" />

		<!-- @close="onClose"   @select="onSelect" -->
	</view>
	
</template>

<script>
	import beiwang from "../../components/beiwang.vue"
	export default {
		components: {
			beiwang
		},
		data() {
			return {
				showLongpress: false,
				form: {
					data: '',
					desc: ''
				},
				operators: [{
					name: '编辑'
				}, {
					name: '删除',
					color: '#07c160'
				}, {
					name: '已达成',
					color: '#07c160'
				}],
				title: '添加',
				showDialog: false,
				showOperator: false,
				acitveBox: '',
				show: false,
				pattern: {
					buttonColor: '#666FFC'
				},
				meituan: {
					idd: 3,
					company: "腾讯",
					job: '产品经理（内推）',
					place: '深圳',
					money: '10-20k/月',
					biande: [{
							date: '04-30',
							desc: '投简历',
							status: "已达成"
						},
						{
							date: '05-15',
							desc: '笔试',
							status: "已达成"
						},
						{
							date: '06-12',
							desc: '面试',
							status: "进行中"
						},
						{
							date: '06-30',
							desc: 'offer',
							status: ''
						},
						{
							date: '05-15',
							desc: '笔试',
							status: "已达成"
						},
						{
							date: '06-12',
							desc: '面试',
							status: "进行中"
						},
						{
							date: '06-30',
							desc: 'offer',
							status: ''
						},


					]
				},
				huawei: {
					idd: 1,
					company: "华为",
					job: 'Java开发',
					place: '西安',
					money: '面谈',
					biande: [{
							date: '05-09',
							desc: '投简历',
							status: "已达成"
						},
						{
							date: '06-15',
							desc: '笔试',
							status: "进行中"
						},
					]
				}
			}
		},
		methods: {
			closeLongpress() {
				this.showLongpress = false
			},
			longpress() {
				this.showLongpress = true
			},
			closeDialog() {
				this.showDialog = false;
			},
			add() {
				this.title = '添加'
				this.showDialog = true
			},
			clickBtn(index) {
				this.showOperator = true
				this.acitveBox = index
			},
			editBtn() {
				this.title = '编辑'
				this.showDialog = true
			},
			showPopup() {
				this.show = true;
			},

			onClose() {
				this.show = false;
			},
			getOffer() {
				console.log("点击了获得Offer")
			},
			stopProcess() {
				console.log("点击了终止进程")
			},
			deleteProcess() {
				console.log("点击了删除进程")
			},
			closeOperator() {
				this.showOperator = false
			},
			selectOperator(e) {
				switch(e.detail.name) {
					case '编辑': 
					this.title = '编辑'
					this.showDialog = true
					break;
					case '删除': 
					console.log('删除');
					break
				}
				this.closeOperator()
			}
		}
	}
</script>

<style>
	.container {
		margin: 15rpx 25rpx 0 25rpx;
	}

	.title {
		text-align: center;
		font-weight: 500;
		border-radius: 20rpx 20rpx 0 0;
		padding: 16rpx 8rpx;
		color: #fff;
		background-color: #666FFC;
	}

	.cell_area {
		padding: 16rpx;
	}

	.width {
		width: 600rpx;
	}

	.submit_btn {
		display: flex;
		flex-direction: row;
		justify-content: center;
		margin: 8rpx 0 20rpx;
	}

	.confirm_btn {
		background-color: #666FFC !important;
	}

	.van-cell__title {
		max-width: 50px !important;
		min-width: 50px !important;
	}

	.van-field__input {
		border-bottom: 1px solid #999 !important;
	}


	.right_btn {
		height: 100%;
	}

	

	.add-form {
		width: 100rpx;
		margin: 0 auto;
	}
	
	
	.van-popup--center {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		width: 500rpx;
	}
	.van-popup {
		background-color: rgba(77,77,77,0) !important;
	}
	.right_item {
		position: relative;
		height: 33.33%;
		display: flex;
		padding: 18rpx;
		width: 107rpx;
		flex-direction: column;
		justify-content: center;
		color: #FFFFFF;
		text-align: center;
		font-size: 13px;
		margin: 8rpx;
		border-radius: 50%;
	}
	.dialog {
		width: 100%;
		background-color: white;
		border-radius: 20rpx;
	}
</style>
